// 合成事件
import React from "react";
import "../index.less"

/*
* React中合成时间的处理原理
*   绝对不是给当前元素给 addEventListener 做的事件绑定，React中的合成事件，都是基于"事件委托"处理的
*   + 在 react17 及以后版本，都是委托给 #root 这个容器 (捕获和冒泡都做了委托) ；
*   + 但是 react17 之前都是委托给 document 容器(而且只做了冒泡阶段的委托)
*   + 对于没有实现事件传播机制的事件，才是单独做的事件绑定(例如：mouseenter)
*   在组件渲染的时候，如果发现JSX元素属性中 有 onXXX / onXXXCapture 这样的属性，不会给当前元素直接做事件绑定，
*       只是把绑定的方法赋值给元素的相关属性！！
*   然后对 #root 这个容器做了事件绑定(捕获和冒泡都做了)
*       原因：因为组件中所渲染的内容，最后都会插入到 #root 容器中，这样点击页面中任何一个元素，最后都会被 #root 触发
*       而在给 #root 绑定的方法中，把之前给元素设置的 onXXX / onXXXCapture 属性，在相应的阶段执行
*
* */

class Demo extends React.Component {
    render() {
        return <div className='outer' onClick={() => { // 这不是DOM0级事件绑定
            console.log("outer 冒泡[合成]")
        }}
                    onClickCapture={() => {
                        console.log('outer 捕获[合成]')
                    }}>
            <div className='inner' onClick={(ev) => {
                console.log("inner 冒泡[合成]")
                ev.stopPropagation() // 合成事件对象中的"阻止事件传播"：阻止原生事件传播 & 阻止合成事件中的事件传播
                // ev.nativeEvent.stopPropagation() // 原生事件对象中的"阻止事件传播":只能阻止原生事件的传播

                // ev.nativeEvent.stopImmediatePropagation() // 原生事件对象的阻止事件传播，且阻止改dom其他绑定的方法执行
            }}
                 onClickCapture={() => {
                     console.log('inner 捕获[合成]')
                 }}>
                111
            </div>
        </div>
    }

    componentDidMount() {
        document.body.addEventListener('click', () => {
            console.log('body 捕获')
        }, true)
        document.body.addEventListener('click', () => {
            console.log('body 冒泡')
        }, false)

        let root = document.querySelector('#root')
        root.addEventListener('click', () => {
            console.log('root 捕获')
        }, true)
        root.addEventListener('click', () => {
            console.log('root 冒泡')
        }, false)

        let inner = document.querySelector('.inner')
        inner.addEventListener('click', () => {
            console.log('inner 捕获[原生]')
        }, true)
        inner.addEventListener('click', (ev) => {
            console.log('inner 冒泡[原生]')
            // ev.stopImmediatePropagation()

        }, false)

        let outer = document.querySelector('.outer')
        outer.addEventListener('click', () => {
            console.log('outer 捕获[原生]')
        }, true)
        outer.addEventListener('click', () => {
            console.log('outer 冒泡[原生]')
        }, false)
    }
}

export default Demo